<template>
  <div class="system-clock" @click="$emit('click')">
    <div class="clock-time">{{ time }}</div>
    <div class="clock-date">{{ date }}</div>
  </div>
</template>

<script setup>
defineProps({
  time: {
    type: String,
    required: true
  },
  date: {
    type: String,
    required: true
  }
})

defineEmits(['click'])
</script>

<style scoped>
.system-clock {
  padding: 4px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
}

.system-clock:hover {
  background: rgba(255, 255, 255, 0.1);
}

.clock-time {
  font-size: 13px;
  color: white;
  text-align: center;
  line-height: 1.2;
}

.clock-date {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 1.2;
}
</style>

